<template>
	<view class="bottom" id="content">
		
		
		<view class="tabbar">
			<view class="tabbar__item" :class="{'on':home===0}" @click="toIndex(0)">
				<view class="tabbar__svg" id="index1">
					
				</view>
				<view class="tabbar__name">任务</view>
			</view>
			<view class="tabbar__item" :class="{'on':home===1}" @click="toIndex(1)">
				<view class="tabbar__svg" id="index2">
					
				</view>
				<view class="tabbar__name">日报</view>
			</view>
			<view class="tabbar__item" :class="{'on':home===2}" @click="toIndex(2)">
				<view class="tabbar__svg" id="index3">
					
				</view>
				<view class="tabbar__name">绩效</view>
			</view>
			<view class="tabbar__item" :class="{'on':home===3}" @click="toIndex(3)">
				<view class="tabbar__svg" id="index4">
					
				</view>
				<view class="tabbar__name">奖罚</view>
			</view>
			<view class="tabbar__item" :class="{'on':home===4}" @click="toIndex(4)">
				<view class="tabbar__svg" id="index5">
					
				</view>
				<view class="tabbar__name">我的</view>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				home: 0,
			}
		},
		onLoad() {

		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			toIndex(index) {
				this.$emit('toIndex', index)
				this.home = index
			}
		}
	}
</script>

<script module="svgs" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.svgs === 'function') {
				this.initSvgs()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/svg.js'
				script.onload = this.initSvgs.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initSvgs() {
				var draw = SVG().addTo('#content').size(0, 0);
				var symbola = draw.symbol().attr({ viewBox:'0 0 25 25' })
				symbola.path('M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L18 9l-9 9z');
				var symbolb = draw.symbol().attr({ viewBox:'0 0 25 25' })
				symbolb.path('M14.6,5.13V4.68A3.19,3.19,0,0,0,11.42,1.5H4.68A3.19,3.19,0,0,0,1.5,4.68V20.32A3.19,3.19,0,0,0,4.68,23.5H20.32a3.19,3.19,0,0,0,3.18-3.18V12.53a3.19,3.19,0,0,0-3.18-3.17H6.77')
				var symbolc = draw.symbol().attr({ viewBox:'0 0 25 25' })
				symbolc.path('M18.16,23.5h2.16a3.19,3.19,0,0,0,3.18-3.18V4.68A3.19,3.19,0,0,0,20.32,1.5H8.81l0,4.19A3.15,3.15,0,1,1,5.69,8.83H1.5V20.32A3.19,3.19,0,0,0,4.68,23.5h8.83s-.49-5.76,4.75-8.38')
				var symbole = draw.symbol().attr({ viewBox:'0 0 25 25' })
				symbole.path('M12 2L15 8H21L16 12L18 19L12 15L6 19L8 12L3 8H9L12 2z');
				var symbold = draw.symbol().attr({ viewBox:'0 0 25 25' })
				symbold.path('M4,23.5a11,11,0,0,1,17,0')
				symbold.path('M15.66,10.5a3.16,3.16,0,0,1-6.32,0H3.5a9,9,0,1,1,2.87,6.59')
				
				
				 //图标颜色渐变
		
				//tab1图标
				var tab1svg = SVG().addTo('#index1');
				tab1svg.use(symbola).attr({ class:'icon' });
				tab1svg.use(symbola).attr({ class:'icon' });
				tab1svg.use(symbola).attr({ class:'icon' });
				tab1svg.use(symbola).attr({ class:'icon' });
				tab1svg.use(symbola).attr({ class:'icon' });
				
				//tab2图标
				var tab2svg = SVG().addTo('#index2');
				tab2svg.use(symbolb).attr({ class:'icon' });
				tab2svg.use(symbolb).attr({ class:'icon' });
				tab2svg.use(symbolb).attr({ class:'icon' });
				tab2svg.use(symbolb).attr({ class:'icon' });
				tab2svg.use(symbolb).attr({ class:'icon' });
				
				
				//tab3图标
				var tab3svg = SVG().addTo('#index3');
				tab3svg.use(symbolc).attr({ class:'icon' });
				tab3svg.use(symbolc).attr({ class:'icon' });
				tab3svg.use(symbolc).attr({ class:'icon' });
				tab3svg.use(symbolc).attr({ class:'icon' });
				tab3svg.use(symbolc).attr({ class:'icon' });
				
				//tab4图标
				var tab4svg = SVG().addTo('#index4');
				tab4svg.use(symbole).attr({ class:'icon' });
				tab4svg.use(symbole).attr({ class:'icon' });
				tab4svg.use(symbole).attr({ class:'icon' });
				tab4svg.use(symbole).attr({ class:'icon' });
				tab4svg.use(symbole).attr({ class:'icon' });
				
				//tab5图标
				var tab5svg = SVG().addTo('#index5');
				tab5svg.use(symbold).attr({ class:'icon' });
				tab5svg.use(symbold).attr({ class:'icon' });
				tab5svg.use(symbold).attr({ class:'icon' });
				tab5svg.use(symbold).attr({ class:'icon' });
				tab5svg.use(symbold).attr({ class:'icon' });
			}  
		}  
	}  
</script>


<style scoped lang="scss">
	
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: $navHeight;
		background: #fff;
		z-index: 10;
	}

	/*苹果x适配 H5APP*/
	@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
		.bottom {
			height: $navHeight + $navBoxHeight;
		}
	}

	/*苹果xs适配 H5APP*/
	@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
		.bottom {
			height: $navHeight + $navBoxHeight;
		}
	}

	/*苹果xr适配 H5APP*/
	@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
		.bottom {
			height: $navHeight + $navBoxHeight;
		}
	}
	
</style>